---
title: Separator
description: Creates a visual or semantic distinction between content.
---

{/* prettier-ignore-start */}
{/* prettier-ignore-end */}

import Code from '@/components/Code.astro';
import { LinkButton } from '@/components/react/LinkButton';
import { Aside, Tabs, TabItem } from '@astrojs/starlight/components';
import importedCode from '@rnr/reusables/components/ui/separator?raw';

<LinkButton href="https://rn-primitives.vercel.app/separator">
  Separator Primitive
</LinkButton>
<LinkButton target="_blank" href="https://rnr-showcase.vercel.app/separator">
  Demo
</LinkButton>

<br />

Creates a visual or semantic distinction between content.

## Installation

<Tabs>
  <TabItem label='CLI'> 
    ```bash
    npx @react-native-reusables/cli@latest add separator
    ```
  </TabItem>
  <TabItem label='Manual'>
    <Aside type="tip" title="Dependencies">
      Before copy/pasting, add the <a href='https://rn-primitives.vercel.app/separator' className='text-white font-bold'> separator primitive</a> to your project.
    </Aside>


    **Copy/paste the following code to `~/components/ui/separator.tsx`**

    <Code code={importedCode} lang="tsx" title="~/components/ui/separator.tsx" />
  </TabItem>
</Tabs>


## Usage

```tsx
import { View } from 'react-native';
import { Separator } from '~/components/ui/separator';
import { H4, P, Small } from '~/components/ui/typography';

function Example() {
  return (
    <View className='flex-1 justify-center items-center p-6 gap-12'>
      <View className='w-full max-w-xs '>
        <View className='gap-1'>
          <H4 className='text-sm native:text-base font-medium leading-none'>Radix Primitives</H4>
          <P className='text-sm native:text-base text-muted-foreground'>
            An open-source UI component library.
          </P>
        </View>
        <Separator className='my-4' />
        <View className='flex flex-row h-5 items-center gap-4 '>
          <Small className='font-normal'>Blog</Small>
          <Separator orientation='vertical' />
          <Small className='font-normal'>Docs</Small>
          <Separator orientation='vertical' />
          <Small className='font-normal'>Source</Small>
        </View>
      </View>
    </View>
  );
}
```

## Props

### Separator

Extends [`View`](https://reactnative.dev/docs/view#props) props

|   Prop   |  Type   |     Note     |
| :------: | :-----: | :----------: |
| orientation  | 'horizontal' \| 'vertical' | Defaults to `horizontal` _(optional)_|
| decorative  | boolean |_(optional)_ |
| asChild  | boolean | _(optional)_ |